<template>
	<view class="comAll">
		<view class="top">
			<view class="status">
				<text :class="{'status0':info.status === 'await_decided' || info.status === 'canceled'}">{{judgmentStatus(info.status)}}</text>
			</view>
			<view class="mainTitle">
				<text class="title">{{info.title}}</text>
				<text class="date">{{formatTime(info.create_time, 'Y-M-D h:m')}}</text>
			</view>
			<view class="header-btn">
				<view v-if="currTag === 1">
					<view v-if="info.status === 'await_decided'" class="action-btn">
						<view class="bottomBtn" hover-class="subActive">
							打开
						</view>
						<view class="bottomBtn" hover-class="subActive" @click.stop="operating(1, info.id)">
							确认
						</view>
						<view hover-class="subActive" class="bottomBtn refuse" @click.stop="operating(2, info.id)">
							拒绝
						</view>
					</view>
					<view v-if="info.status === 'refuse'" class="action-btn">
						<view class="bottomBtn" hover-class="subActive">
							打开
						</view>
						<view class="bottomBtn" hover-class="subActive" @click.stop="operating(0, info.id)">
							删除
						</view>
					</view>
				</view>
				<view v-if="currTag === 2">
					<view v-if="info.status === 'decided'" class="action-btn">
						<view class="bottomBtn" hover-class="subActive">
							打开
						</view>
						<view class="bottomBtn" hover-class="subActive" @click.stop="operating(1, info.id)">
							发货
						</view>
						<view class="bottomBtn refuse" hover-class="subActive" @click.stop="operating(2, info.id)">
							取消
						</view>
					</view>
					<view v-if="info.status === 'canceled'" class="action-btn">
						<view class="bottomBtn" hover-class="subActive">
							打开
						</view>
						<view class="bottomBtn" hover-class="subActive" @click.stop="operating(0, info.id)">
							删除
						</view>
					</view>
				</view>
				<view v-if="currTag === 3" class="action-btn">
					<view class="bottomBtn" hover-class="subActive" @click.stop="operating(0, info.id)">
						删除
					</view>
				</view>
				<view v-if="currTag === 4" class="action-btn">
					<view class="bottomBtn" hover-class="subActive">
						打开
					</view>
					<view class="bottomBtn" hover-class="subActive" @click.stop="operating(0, info.id)">
						删除
					</view>
				</view>
			</view>
		</view> 
		<view class="content">
			<view>
				<text class="contentLeft">食材种类</text>
				<text class="contentRight">{{info.item_num}}</text>
			</view>
			<view>
				<text class="contentLeft">制单日期</text>
				<text class="contentRight">{{formatTime(info.create_time, 'Y-M-D')}}</text>
			</view>
			<view>
				<text class="contentLeft">采购总金额</text>
				<text class="contentRight">{{info.total_price}}</text>
			</view>
			<view>
				<text class="contentLeft">交货日期</text>
				<text class="contentRight">{{formatTime(info.delivery_time, 'Y-M-D')}}</text>
			</view>
			<view>
				<text class="contentLeft">发货时效</text>
				<text class="contentRight">{{info.trading_hours}}</text>
			</view>
			<view>
				<text class="contentLeft">收货部电话</text>
				<text class="contentRight">{{info.receiving_phone}}</text>
			</view>
			<view>
				<text class="contentLeft">收货部地址</text>
				<text class="contentRight">{{info.receiving_address}}</text>
			</view>
			<view>
				<text class="contentLeft">收货联系人</text>
				<text class="contentRight">{{info.receiving_contacts}}</text>
			</view>
		</view>
		<!-- <view class="bottomBtnView" v-if="currTag === 1 || currTag === 2 || currTag === 3">
			
		</view> -->
	</view>
</template>

<script>
	import { formatTime } from '@/utils/tools.js'
	export default {
		props: {
			info: Object,
			currTag: Number,
		},
		data() {
			return {}
		},
		methods: {
			formatTime,
			operating(value,id) {
				this.$emit("cardOperating", {type:value, id: id})
			},
			judgmentStatus(value) {
				if (this.currTag === 1) {
					if (value === 'await_decided') {
						return '待确认'
					}
					if (value === 'refuse') {
						return '已拒绝'
					}
				}
				if (this.currTag === 2) {
					if (value === 'decided') {
						return '已确认'
					}
					if (value === 'canceled') {
						return '已取消'
					}
				}
				if (this.currTag === 3) {
					return '已发货'
				}
				if (this.currTag === 4) {
					return '已收货'
				}
			}
		}
	}
</script>

<style scoped>
	.comAll {
		padding: 17upx;
		border-radius: 10upx;
		background-color: #FFF;
		box-shadow: 0 0 30upx -15upx #f03d3d;
	}

	.top {
		display: flex;
		margin-bottom: 22upx;
		align-items: center;
	}

	.status {
		font-size: 24upx;
		color: #FFF;
		margin-right: 17upx;
		margin-top: 8upx;
		align-self: flex-start;
	}

	.status text {
		background-color: #f7533e;
		border-radius: 7upx;
		padding: 2upx 5upx;
	}

	.status0 {
		background-color: #ffc8c7 !important;
		color: #666666 !important;
	}

	.mainTitle {
		flex: none;
		/* display: flex;
		flex-wrap: wrap; */
	}
	.mainTitle text{
		display: block;
	}

	.title {
		width: 100%;
		font-size: 32upx;
		color: #333333;
		font-weight: bold;
		padding-bottom: 10upx;
	}

	.date {
		width: 100%;
		font-size: 24upx;
		color: #6d6d6d;
	}

	.content {
		background-color: #f2f2f2;
		border-radius: 10upx;
		font-size: 24upx;
		color: #6d6d6d;
		padding: 17upx;
	}

	.content view {
		display: flex;
		padding-bottom: 10upx;
	}

	.contentLeft {
		width: 30%;
	}

	.contentRight {
		width: 70%;
	}

	.bottomBtnView {
		width: 100%;
		margin-top: 10upx;
		height: 40upx;
	}

	.bottomBtnView view {
		text-align: right;
	}

	/* .bottomBtn:last-child {
		margin-left: 30upx;
	} */

	.bottomBtn {
		/* color: #FFF;
		background-color: #F7533E;
		font-size: 20upx;
		width: 80upx;
		height: 36upx;
		padding: 0;
		line-height: 36upx;
		display: inline-block; */
		border-radius: 10upx;
		background-color: #ff0000;
		color: #FFF;
		font-size: 28upx;
		padding: 5upx 10upx;
	}
	.bottomBtn+.bottomBtn{
		margin-left: 20upx;
	}
	.bottomBtn:after {
		border: none;
	}

	.refuse {
		background-color: #ffc8c7 !important;
		color: #666666 !important;
	}

	.subActive {
		background-color: #FF0000 !important;
	}
	.header-btn{
		margin-left: auto;
	}
	.action-btn{
		display: flex;
	}
</style>
